<template>
    <div><!--项目式课程-->
        <div class="color999 tips-box" style="background: #fafafa;padding: 18px;">
            <i class="point-icon"></i>
            <div style="width: 100%;">
                <p>{{ $t('cos_content_requirements', {'electives': electivesNum , 'required': requiredNum}) }}</p><!--要完成该课程，必须满足所有必修条件及满足/个选修条件-->
          <!--      <p v-if="pendingTips">{{ $t('cos_content_waiting_tip') }}</p>--><!--目前学习人数太多，您的报名申请正排队等待管理员审批，需管理员确认审批后，才能开始学习-->
            </div>
        </div>
        <!--必修条件-->
        <div class="integrated-body bottom-shadow" v-if="required.length > 0">
            <div class="integrated-body-nav" style="border-bottom: 1px solid #cccccc;" @click="expandFirstLevel(0)">
                <i class="more-icon icon-left" :class="{'cur': requiredOpen}"></i>
                {{ $t('cos_required_condition') }}
                <span class="satisfy-icon font-size11 color999" style="float: right;padding-right: 15px;" :class="{'cur' : satisfyRequired}">{{ satisfyRequired ? $t('mod_fulfill') : $t('mod_unfulfill') }}</span><!--已满足/未满足-->
            </div>
            <!--必须完成以下{{item.icd_completed_item_count}}门课程/考试-->
            <div style="padding-left: 65px;" v-for="(item, index) in required" :key="index" v-show="requiredOpen">
                <div class="integrated-body-secondary clearfix" style="border-bottom: 1px solid #dddddd;" @click="expandSecondary(0,index)">
                    <i class="more-icon icon-left" :class="{'cur': item.isOpen}"></i>
                    {{ $t('cos_integrated_must_do', {'value': item.claimCount }) }}
                </div>
                <ul v-show="item.isOpen">
                    <li class="integrated-body-course"  @click="jump(cours.itmId,cours.courseEnum,cours.itmTitle)" v-for="(cours, childId) in item.courseList" :key="childId">
                        <div>
                            <div><i class="public-mobile-icon"></i>{{cours.itmTitle}}</div>
                            <div>{{freshCourseType[cours.courseEnum]}}</div>
                        </div>
                        <div class="line">
                            <span></span>
                        </div>
                        <div><!--'未报名' 或显示状态-->
                            {{checkLearnStatus(cours.learnerStatus) || $t('cos_app_notapp')}}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--选修条件-->
        <div class="integrated-body bottom-shadow" v-if="electives.length > 0">
            <div class="integrated-body-nav clearfix" style="border-bottom: 1px solid #cccccc;" @click="expandFirstLevel(1)">
                <i class="more-icon icon-left" :class="{'cur': electivesOpen}"></i>
                {{ $t('cos_elective_condition') }}
                <span class="font-size11 color999 satisfy-icon" style="float: right;padding-right: 15px;" :class="{'cur' : satisfyElectives}">{{ satisfyElectives ? $t('mod_fulfill') : $t('mod_unfulfill') }}</span><!--已满足/未满足-->
            </div>
            <!--必须完成以下{{item.icd_completed_item_count}}门课程/考试-->
            <div style="padding-left: 65px;" v-for="(item, index) in electives" :key="index" v-show="electivesOpen">
                <div class="integrated-body-secondary" style="border-bottom: 1px solid #dddddd;" @click="expandSecondary(1,index)">
                    <i class="more-icon icon-left" :class="{'cur': item.isOpen}"></i>
                    {{ $t('cos_integrated_must_do', {'value': item.claimCount }) }}
                </div>
                <ul v-show="item.isOpen">
                    <li class="integrated-body-course" @click="jump(cours.itmId,cours.courseEnum,cours.itmTitle)" v-for="(cours, childId) in item.courseList" :key="childId">
                        <div>
                            <div><i class="public-mobile-icon"></i>{{cours.itmTitle}}</div>
                            <div>{{freshCourseType[cours.courseEnum]}}</div>
                        </div>
                        <div class="line">
                            <span></span>
                        </div>
                        <div><!--'未报名'-->
                          {{checkLearnStatus(cours.learnerStatus) || $t('cos_app_notapp')}}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
export default {
    name: 'Integrated',
    data() {
        return {
            listCompulsory: [], //必修列表
            listElective: [], //选修列表
            pendingTips: false,
            course: {},
            btnNum: '', //该属性是旧的逻辑用于控制一些按钮（如报名按钮）显示的标记
            unregistered: false, //未报名1，等待队列与等待审批也算报名成功
            electives: [],
            required: [],
            satisfyElectives: false, //选修是否满足条件
            satisfyRequired: false, //必修是否满足条件
            electivesNum: 0,
            requiredNum: 0,
            optioning: true,
            requiredOpen: true, // 必修展开开关
            electivesOpen: true // 选修展开开关
        };
    },
    mixins: [mixin],
    computed: {
        cont() {
            return this.$store.getters.getUnregistered;
        },
        checkLearnStatus() {
            return function(status) {
                let result = this.$t('cos_app_notapp');
                switch (status) {
                case 'I' :
                    result = this.$t('cos_app_inprogress'); //进行中
                    break;
                case 'C' :
                    result = this.$t('cos_app_completed'); //已完成
                    break;
                case 'F' :
                    result = this.$t('cos_app_fail'); //未完成
                    break;
                case 'W' :
                    result = this.$t('cos_app_withdrawn'); //已放弃
                    break;
                }
                return result;
            };
        }
    },
    methods: {
        expandFirstLevel(index) {
            if (index === 0) {
                this.requiredOpen = !this.requiredOpen;
            } else {
                this.electivesOpen = !this.electivesOpen;
            }
        },
        expandSecondary(type, index) {
            if (type === 0) { // 必修
                this.$set(this.required[index], 'isOpen', !this.required[index].isOpen);
                this.$forceUpdate();
            } else { // 选修
                this.$set(this.electives[index], 'isOpen', !this.electives[index].isOpen);
                this.$forceUpdate();
            }
        },
        checkCourseContent() {
            if (this.optioning) {
                this.optioning = false;
                if (this.electives.length > 0) {
                    let num = 0;
                    this.electives.forEach(i => {
                        if (this.checkCourseStatus(i.claimCount, i.courseList)) {
                            num++;
                        }
                        if (i.claimCount) {
                            this.electivesNum += i.claimCount;
                        }
                    });
                    if (num === this.electives.length) {
                        this.satisfyElectives = true; //选修是否满足条件
                    }
                }
                if (this.required.length > 0) {
                    let num = 0;
                    this.required.forEach(i => {
                        if (this.checkCourseStatus(i.claimCount, i.courseList)) {
                            num++;
                        }
                        if (i.claimCount) {
                            this.requiredNum += i.claimCount;
                        }
                    });
                    if (num === this.required.length) {
                        this.satisfyRequired = true; //选修是否满足条件
                    }
                }
            }
        },
        setContent(data) {
            this.course = data;
            if (data.integratedCourseModuleDTO) {
                this.electives = data.integratedCourseModuleDTO.electiveList.map(item => {
                    item.isOpen = true;
                    return item;
                }); // 选修
                this.required = data.integratedCourseModuleDTO.compulsoryList.map(item => {
                    item.isOpen = true;
                    return item;
                }); //必修
                this.checkCourseContent();
            }
            this.btnNum = this.course.btn; //该属性是旧的逻辑用于控制一些按钮（如报名按钮）显示的标记
            this.unregistered = !this.$store.getters.hasApped(this.appStatus); //报名不成功1
            // this.getContentTipInfo(this.unregistered, this.btnNum);
        },
        // getContentTipInfo(unregistered, btnNum) {
        //     if (unregistered === true && btnNum === 6) { //还没报名
        //         this.pendingTips = true;
        //     }
        // },
        jump(id, type, title) {
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${id}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: id, title: title}});
            } else {
                this.$router.push({path: `/course/${id}/0`});
            }
        },
        checkCourseStatus(satisfyNum, list) {
            if (list.length > 0) {
                let num = 0;
                if (satisfyNum === 0) {
                    return true;
                } else {
                    list.forEach(i => {
                        if (i.learnerStatus === 'C') {
                            num++;
                        }
                    });
                    if (num >= satisfyNum) {
                        return true;
                    }
                }
            }
        }
    },
    mounted() {
        // let childs = this.$store.getters.getDetail.child;
        // for (let item in childs) {
        //     if (childs[item][0].icd.icd_type === '必修条件') {
        //         let obj = {
        //             icd_type: childs[item][0].icd.icd_type,
        //             icd_completed_item_count: childs[item][0].icd.icd_completed_item_count,
        //             child: childs[item]
        //         };
        //         this.listCompulsory.push(obj);
        //     } else {
        //         let obj = {
        //             icd_type: childs[item][0].icd.icd_type,
        //             icd_completed_item_count: childs[item][0].icd.icd_completed_item_count,
        //             child: childs[item]
        //         };
        //         this.listElective.push(obj);
        //     }
        // };
        this.$store.watch((store, getters) => {
            this.setContent(getters.getDetail);
        });
    }
};
</script>

<style scoped lang="less">
    .integrated-body{
        background: #ffffff;
        margin-bottom: 15px;
        .integrated-body-nav{
            height: 60px;
            line-height: 60px;
            padding-left: 34px;
            position: relative;
            i{
                width: 12px;
                height: 12px;
                display: block;
                background-size: 12px;
                background-position: 0 -3px;
                position: absolute;
                left: 15px;
                top: 23px;
                &.cur{
                    background-position: 0 -21px;
                }
            }
        }
        .integrated-body-secondary{
            height: 60px;
            position: relative;
            display: flex;
            align-items: center;
            i{
                width: 12px;
                height: 12px;
                display: block;
                background-size: 12px;
                background-position: 0 -3px;
                position: absolute;
                left: -19px;
                &.cur{
                    background-position: 0 -21px;
                }
            }
        }
        .integrated-body-course{
            display: flex;
            padding: 20px 0;
            border-bottom: 1px solid #dddddd;
            & > div:first-child{
                width: calc(100% - 110px);
                margin-right: 20px;
                div:first-child{
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                div:last-child{
                    color: #999999;
                    margin-top: 10px;
                }
            }
            & > div:last-child{
                width: 90px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .line {
                width: 1px;
                display: flex;
                justify-content: center;
                align-items: center;
                span {
                    width: 1px;
                    height: 15px;
                    background: #e6e6e6;
                }
            }
        }
    }
    .satisfy-icon:before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url(./images/course-icon.png) no-repeat 0 -21px;
        background-size: 12px;
        margin: 0 5px -1px 15px;
    }
    .satisfy-icon.cur:before {
        content: "";
        background-position: 0 -36px;
        background-size: 11px;
    }
    .tips-box {
        display: flex;
        align-items: center;
    }
</style>
